<template>
<el-row style="height: 100vh;">
  <el-col :span="3"></el-col>
  <el-col :span="18" style="display: table;"><div style="
    position: relative;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    top: -50px;
    ">
    <h2 style="
      text-align: center;
      ">出入校表单</h2>
    <el-form>
      <el-form-item>
        <el-tooltip content="数据存储在本地浏览器中，不会上传数据；如需修改，请点击处理表单页面的蓝色名字，回到该页面。" placement="top" effect="light">
        <el-input @click="open" v-model="username" placeholder="名字" clearable /></el-tooltip>
      </el-form-item>
      <el-form-item>
        <el-input v-model="reason" placeholder="不填则为随机理由" clearable />
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="sex">
          <el-radio-button label="男"></el-radio-button>
          <el-radio-button label="女"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-button style="width: calc(100vw / 12 * 9);" @click="login">OK</el-button>
    </el-form>
  </div></el-col>
  </el-row>
</template>

<style>
span.el-radio-button__inner{
  width: calc(100vw / 24 * 9);
}
div.el-popper{
  max-width: calc(100vw / 12 * 9);
  font-size: 14px;
}
</style>

<script>
import { ElMessage } from 'element-plus'
import { mapMutations } from "vuex"
import moment from 'moment'

export default{
  data () {
    return {
      username: this.$store.state.username,
      sex: this.$store.state.sex,
      reason: this.$store.state.reason,
      message: this.$store.state.message,
    };
  },
  mounted(){
    this.$nextTick(function(){
      if (this.message!=""){
        console.log(this.message)
        ElMessage({message: this.message})
        this.setMessage("")}
      })
  },
  methods: {
    ...mapMutations(["setName", "setSex", "setInitialTime", "setReason", "setMessage"]),
    login(e) {
      e.preventDefault();
      this.setName(this.username);
      if (this.username===""){
        this.setName("我是迪迦你相信吗");
        if (this.reason===""){
          this.setReason("打小怪兽")
        } else {
          this.setReason(this.reason)
        }
      } else {
        if (this.reason===""){
          this.setReason(this.$store.state.reasonList[Math.floor(Math.random()*this.$store.state.reasonList.length)])
        } else {
          this.setReason(this.reason)
        }
      }
      this.setSex(this.sex);
      this.setInitialTime(moment(Date()).format("MMDD"));
      this.$router.push("/");
    },

  },
};

</script>
